<template>
  <div class="crud-opts">
    <span class="crud-flex">
      <!--左侧插槽-->
      <slot name="left"/>
      <img class="img" src="@images/update.png" alt="" @click="doReply()">
      <!--更多操作-->
      <el-popover v-if="checkPermission(['appToDoQueue:run', 'appToDoQueue:del', 'appToDoQueue:batchDel'])"
                  placement="bottom" width="100" style="height:30px" trigger="click">
        <img class="img" slot="reference" src="@images/more.png" alt="">
        <el-row>
            <el-button type="text" @click="immediately(crud.selections[0])"
                       v-permission="permission.run==undefined ? ['']:permission.run"
                       :disabled="crud.selections.length !== 1">立即执行</el-button>
        </el-row>
        <el-row>
            <el-button type="text" @click="toDoRemove(crud.selections[0])"
                       v-permission="permission.del==undefined ? ['']:permission.del"
                       :disabled="crud.selections.length !== 1">移除</el-button>
        </el-row>
        <el-row>
          <el-button type="text" @click="toDoListRemove(crud.selections)"
                     v-permission="permission.batchDel==undefined ? ['']:permission.batchDel"
                     :disabled="crud.selections.length == 0">批量移除</el-button>
        </el-row>
      </el-popover>
      <el-button-group style="height:30px">
        <!--查询按钮-->
        <img class="img" v-if="crud.props.searchToggle" src="@images/search.png" alt=""
             @click="toggleSearch()">
        <div style="display: inline-block;display:flex;align:center" class="select">
          <img class="img" style="margin-right:0px !important" v-if="!crud.props.searchToggle" src="@images/hidden.png"
               alt="" @click="toggleSearch()">
          <el-input placeholder="请输入内容" v-model="qryParam" style="width: 300px;" class="input-with-select"
                    @change="paramChange" v-if="!crud.props.searchToggle" clearable>
            <el-select v-model="qryCloum" @change="cloumChange" slot="prepend" filterable placeholder="请选择"
                       style="width: 100px">
              <el-option v-for="(item, i) in crud.queryList" :label="item.cloumName" :key="i" :value="item.cloumValue"/>
            </el-select>
          </el-input>
          <img class="img" v-if="!crud.props.searchToggle" slot="append" src="@images/search.png" alt=""
               @click="doQuery">
        </div>
      </el-button-group>
      <!--右侧-->
      <slot name="right"/>
    </span>
    <el-button-group style="margin-top: 8px;" class="crud-opts-right">
      <el-pagination
        :page-size.sync="page.size"
        :total="page.total"
        :current-page.sync="page.page"
        style="margin-top: 8px;"
        layout="prev, pager, next,sizes,total"
        @size-change="crud.sizeChangeHandler($event)"
        @current-change="crud.pageChangeHandler"
        :pager-count="5" prev-text=" " next-text=" "
      />
    </el-button-group>
  </div>
</template>

<script>
import CRUD, {crud, pagination} from "@crud/crud";
import queue from '@/api/queue/queue'
import checkPermission from '@/utils/permission' // 权限判断函数

export default {
  mixins: [crud(), pagination()],
  props: {
    permission: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      qryParam: "",
      qryCloum: ""
    };
  },
  created() {
    this.crud.updateProp("searchToggle", true);
  },
  methods: {
    checkPermission,
    toggleSearch() {
      this.crud.props.searchToggle = !this.crud.props.searchToggle;
    },
    paramChange(value) {
      this.qryParam = value;
    },
    cloumChange(value) {
      this.qryCloum = value;
      for (let key in this.crud.query) {
        if (key != this.qryCloum) {
          delete this.crud.query[key]
        }
      }
    },
    doReply() {
      this.crud.findVM('presenter').$refs['table'].clearFilter()
      this.crud.query = {}
      this.qryParam = ''
      this.qryCloum = ''
      this.crud.toQuery()
    },
    doQuery() {
      var key = "";
      var value = "";
      if (this.qryCloum == null || this.qryCloum == '') {
        this.$message({
          message: '请先选择搜索项',
          type: 'warning'
        });
        return;
      }
      if (this.qryCloum != null && this.qryCloum != "") {
        key = this.qryCloum;
      }
      if (this.qryParam != "" && this.qryParam != null) {
        value = this.qryParam;
      }
      this.crud.query[key] = value;
      this.crud.toQuery();
    },
    immediately(param) {
      queue.toDoImplement(param).then(res => {
        this.crud.toQuery();
        this.$notify({
          title: '执行成功',
          type: 'success',
          duration: 2500
        })
      }).catch(res => {

      })
    },
    toDoRemove(param) {
      queue.toDoRemove(param).then(res => {
        this.crud.toQuery();
        this.$notify({
          title: '移除成功',
          type: 'success',
          duration: 2500
        })

      })
    },
    toDoListRemove(param) {
      queue.toDoListRemove(param).then(res => {
        this.crud.toQuery();
        this.$notify({
          title: '移除成功',
          type: 'success',
          duration: 2500
        })

      })
    }
  }
};
</script>

<style>
.crud-opts {
  padding: 6px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}
</style>
